<style>
.validation-advice {
	color: red;
	padding: 10px 0px;
}
input {
	margin: 5px 0px;
}
</style>

<p>Validates that a form's inputs are correct. Fill out the form as described and submit it. Should scroll you to errors as you defocus from inputs.</p>

<form id="foo">
	<dl>
		<dt>this cannot be empty</dt>
		<dd><input name="a" class="required"></dd>
		<dt>this must be an integer (-1,0,1,2,3, etc)</dt>
		<dd><input name="b" class="required validate-integer"></dd>
		<dt>this must be numeric (0, 1.3, -5.2, 10, etc) </dt>
		<dd><input name="c" class="required validate-numeric"></dd>
		<dt>this must be between 3 and 6 characters long</dt>
		<dd><input name="d" class="required minLength:3 maxLength:6"></dd>
		<dt>this must be numbers only, but punctuation and spaces are ok</dt>
		<dd><input name="e" class="required validate-digits"></dd>
		<dt>this must be only letters</dt>
		<dd><input name="f" class="required validate-alpha"></dd>
		<dt>this must be letters and/or numbers</dt>
		<dd><input name="g" class="required validate-alphanum"></dd>
		<dt>this must be a date; try lots of combos</dt>
		<dd><input name="h" class="required validate-date"></dd>
		<dt>this must be an email address</dt>
		<dd><input name="i" class="required validate-email"></dd>
		<dt>this must be a url</dt>
		<dd><input name="j" class="required validate-url"></dd>
		<dt>this must be a dollar currency ($1.00, $1,000.00, $100)</dt>
		<dd><input name="k" class="required validate-currency-dollar"></dd>
		<dt>this one of these must be checked</dt>
		<dd>
			a: <input name="l" type="checkbox" value="1">
			b: <input name="m" type="checkbox" value="2">
			c: <input type="checkbox" value="3" class="validate-one-required">
		</dd>
	</dl>
	<input type="submit">
</form>

<script src="/depender/build?require=More/Form.Validator.Inline,More/Fx.Reveal,More/Fx.Scroll"></script>

<script type="text/javascript">
	new Form.Validator.Inline('foo', {
		serial: false,
		scrollToErrorsOnSubmit: false,
		scrollToErrorsOnBlur: true,
		onFormValidate: function(passed, form, event){
			event.stop();
			if (passed) alert('form validated');
			else alert('form did NOT validate');
		}
	});
</script>
